<!doctype html>
<html>
	<head>
		<!--声明当前页码的编码集：charset=gbk,gb2312(中文编码),utf-8(国际编码)-->
		<meta http-equiv="content-Type" content="text/html;charset=utf-8">
		<!--当前页面的三要素-->
		<title>第十三节，盒子模型的概念</title>
		<meta name="keywords" content="关键词,关键词">
		<meta name="description" content="">

		<!--css,js-->
		<style type="text/css">
			*{margin:0;padding:0;}
			body{font-size:12px;font-family:"微软雅黑"; color:#000}
			h2{text-align:center;}
			h4{text-align:center;line-height:60px;}
			img{margin:0 auto;padding: 10px 10px;display:block;}
			.shisan{width:800px;border:1px solid #000;margin:10px auto;}
			.shisana{width:800px;height:370px;border:1px solid #000;margin:10px auto;}
			.shisan1{width:350px;height:60px;border-width:6px;border-style:dotted;border-color:#000;float:left;margin:10px 15px;}
			.shisan2{width:350px;height:60px;border-width:6px;border-style:dashed;border-color:#000;float:right;margin:10px 15px;}
			.shisan3{width:350px;height:60px;border-width:6px;border-style:solid;border-color:#000;float:left;margin:10px 15px;}
			.shisan4{width:350px;height:60px;border-width:6px;border-style:double;border-color:#000;float:right;margin:10px 15px;}
			.shisan5{width:350px;height:60px;border-width:6px;border-style:groove;border-color:#F3C;float:left;margin:10px 15px;}
			.shisan6{width:350px;height:60px;border-width:6px;border-style:ridge;border-color:#F3C;float:right;margin:10px 15px;}
			.shisan7{width:350px;height:60px;border-width:6px;border-style:inset;border-color:#F3C;float:left;margin:10px 15px;}
			.shisan8{width:350px;height:60px;border-width:6px;border-style:outset;border-color:#F3C;float:right;margin:10px 15px;}
		</style>
	</head>
<body>
	<h1>第十三节，盒子模型的概念</h1>
	
	<div class="shisan">
	<h2>css内边距</h2>
	增加内边距，边框和外边距不会影响内容区域的尺寸，但是会增大元素框的总尺寸
	margin-top:100px设置距顶部的距离<br/>
	<img src="images/padding.png"/><br/>
	padding的定义：{padding: 上px 右px 下px 左px;}，不能为负值////
	也可以定义为：{padding: 上下px 左右px;}////
	如：paddinng:20px 20px距离上下和左右都是20px,而不是距离上和左20px
	</div>

	<div class="shisan">
	<h2>css外边距</h2>
	margin定义的是和其他元素之间的距离，不会增大本身元素框的总尺寸
	相邻的两个块之间都设置有相应的margin时，以较大者为准，不会相加<br/>
	<img src="images/margin.png"/><br/>
	margin的定义：{margin: 上px 右px 下px 左px;}////
	也可以定义为：{margin: 上下px 左右px;}////
	如：margin:20px 20px距离上下和左右都是20px,而不是距离上和左20px
	</div>

	<div class="shisan"><img src="images/border.png"/><br/></div>

	<div class="shisana">
		<div class="shisan1">
		<h4>border-style:dotted;border-color:#000;</h4>
		</div>
		<div class="shisan2">
		<h4>border-style:dashed;border-color:#000;</h4>
		</div>
		<div class="shisan3">
		<h4>border-style:solid;border-color:#000;</h4>
		</div>
		<div class="shisan4">
		<h4>border-style:double;border-color:#000;</h4>
		</div>
		<div class="shisan5">
		<h4>border-style:groove;border-color:#F3C;</h4>
		</div>
		<div class="shisan6">
		<h4>border-style:ridge;border-color:#F3C;</h4>
		</div>
		<div class="shisan7">
		<h4>border-style:inset;border-color:#F3C;</h4>
		</div>
		<div class="shisan8">
		<h4>border-style:outset;border-color:#F3C;</h4>
		</div>
	</div>
</body>
</html>